<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/5.css">
</head>
<body>
    
    <!-- 写一个后期可以直接使用swiper插件的结构 -->
    <!-- 装整个内容的大盒子 swiper-container -->
    <div class="swiper-container banner1">
        <!-- 图片盒子  swiper-wrapper -->
        <div class="swiper-wrapper pics">
            <div class="swiper-slide"><img src="https://www.jq22.com/demo/jquerylbt202008171135/img/t4.png" alt=""></div>
            <div class="swiper-slide"><img src="https://www.jq22.com/demo/jquerylbt202008171135/img/t1.png" alt=""></div>
            <div class="swiper-slide"><img src="https://www.jq22.com/demo/jquerylbt202008171135/img/t3.png" alt=""></div>
            <div class="swiper-slide"><img src="https://www.jq22.com/demo/jquerylbt202008171135/img/t2.png" alt=""></div>
        </div>
        <!-- 分页器 swiper-pagination -->
        <div class="swiper-pagination tab">
        </div>
        <!-- 上下 swiper-button-prev   swiper-button-next-->
        <div class="swiper-button-prev prev">《</div>
        <div class="swiper-button-next next">》</div>
    </div>

    <div class="swiper-container banner2">
        <!-- 图片盒子  swiper-wrapper -->
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="https://www.jq22.com/demo/jquerylbt202008171135/img/t4.png" alt=""></div>
            <div class="swiper-slide"><img src="https://www.jq22.com/demo/jquerylbt202008171135/img/t1.png" alt=""></div>
            <div class="swiper-slide"><img src="https://www.jq22.com/demo/jquerylbt202008171135/img/t3.png" alt=""></div>
        </div>
        <!-- 上下 swiper-button-prev   swiper-button-next-->
        <div class="swiper-button-prev">《</div>
        <div class="swiper-button-next">》</div>
    </div>


    <div class="swiper-container banner3">
        <!-- 图片盒子  swiper-wrapper -->
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="https://www.jq22.com/demo/jquerylbt202008171135/img/t1.png" alt=""></div>
            <div class="swiper-slide"><img src="https://www.jq22.com/demo/jquerylbt202008171135/img/t3.png" alt=""></div>
        </div>
        <!-- 分页器 swiper-pagination -->
        <div class="swiper-pagination">
        </div>
    </div>

    <div class="swiper-container banner4">
        <!-- 图片盒子  swiper-wrapper -->
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="https://www.jq22.com/demo/jquerylbt202008171135/img/t4.png" alt=""></div>
            <div class="swiper-slide"><img src="https://www.jq22.com/demo/jquerylbt202008171135/img/t3.png" alt=""></div>
        </div>
    </div>

    <script src="./js/5.js"></script>
</body>
</html>